<template>
  <div class="zscbbg">
    <!-- 标题 -->
    <head-main :headimg="headimg" :btname="btname" :btrouter="btrouter" />
    <!-- 弹窗提示确认 -->
    <div class="yytcbox" v-show="!shownr">
      <img src="@/images/yytcbg.png" alt="" />
      <div class="yytdes2">
        <img src="@/images/mbg.png" alt="" />
        <div class="ydss">
          <p>姓名：李刚</p>
          <p>性别：男</p>
          <p>年龄：55岁</p>
          <p>身高：175cm</p>
          <p>体重：88kg</p>
          <p>职业：公务员</p>
          <p>
            病情概括：目前血糖偏高，血脂正常，
            无高血压和并发症，采用单纯膳食治疗。
          </p>
        </div>
      </div>
      <div class="tool yzboxqd" @click="shownr = true">
        <img src="@/images/qd.png" alt="" class="active" />
        <img src="@/images/qdac.png" alt="" class="normal" />
      </div>
    </div>
    <!-- 题目 -->
    <div class="tmqx beautifulScroll">
      <div class="tmdesbox">
        <div class="tmmbg"><img src="@/images/mbg.png" alt="" /></div>
        <div class="tmdessb">
          <p>姓名：李刚</p>
          <p>性别：男</p>
        </div>
        <div class="tmdessb">
          <p>年龄：55岁</p>
          <p>身高：175cm</p>
        </div>
        <div class="tmdessb">
          <p>体重：88kg</p>
          <p>职业：公务员</p>
        </div>
        <div class="tmdessb">
          <p>病情概括：目前血糖偏高，血脂正常，</p>
          <p>无 高血压和并发症，采用单纯膳食治疗。</p>
        </div>
      </div>
      <div class="tmzsbos">
        <div>
          <p class="tmdbt">1.计算体重</p>
          <div class="tmfbox">
            <div class="tmdd" :class="input1show ? 'erso' : ''">
              <span
                >（1）李刚的标准体重为（<el-input
                  v-model="input1"
                  class="inputs"
                ></el-input
                >）公斤</span
              >
              <p v-show="desshow">解析：李刚的标准体重=身高-105=175-105=70</p>
            </div>
            <div class="tmdd" :class="input2show ? 'erso' : ''">
              <span
                >（2）李刚的体重属于（<el-input
                  v-model="input2"
                  class="inputs"
                ></el-input
                >）</span
              >
              <div class="xxtbox">
                <span>A.偏瘦</span>
                <span>B.正常</span>
                <span>C.超重</span>
                <span>D.肥胖</span>
              </div>
              <p v-show="desshow">
                解析：（实际体重-理想体重）÷理想体重×100%=（88-70）÷70×100%=25.7%，超出标准体重的20%，为肥胖
              </p>
            </div>
          </div>
        </div>
        <div>
          <p class="tmdbt">2.计算总热量</p>
          <div class="tmfbox">
            <div class="tmdd" :class="input3show ? 'erso' : ''">
              <span
                >（1）李刚的劳动强度为 （<el-input
                  v-model="input3"
                  class="inputs"
                ></el-input
                >）</span
              >
              <div class="xxtbox">
                <span>A.轻体力劳动 </span>
                <span>B.中体力劳动</span>
                <span>C.重体力劳动</span>
              </div>
              <p v-show="desshow">解析：公务员属于轻体力劳动强度</p>
            </div>
            <div class="tmdd" :class="input4show ? 'erso' : ''">
              <span>
                （2）李刚每日所需的总热量为（<el-input
                  v-model="input4"
                  class="inputs"
                ></el-input
                >）千卡</span
              >
              <p v-show="desshow">
                解析：总热量=标准体重×标准千卡=70×（20~25）=1400~1750千卡
                因为李先生肥胖，而且目前血糖控制不好，故建议能量供给量为1400千卡
              </p>
            </div>
          </div>
        </div>
        <div>
          <p class="tmdbt">3.热量分配</p>
          <div class="tmfbox">
            <div class="tmdd" :class="input5show ? 'erso' : ''">
              <span
                >（1）李刚每天应摄入（<el-input
                  v-model="input5"
                  class="inputs"
                ></el-input
                >）份食物</span
              >
              <p v-show="desshow">
                解析：食物交换份数=每日所需总热量÷90=1400÷90≈16
              </p>
            </div>
            <div class="tmdd" :class="input6show ? 'erso' : ''">
              <span
                >（2）碳水化合物交换份数为（<el-input
                  v-model="input6"
                  class="inputs"
                ></el-input
                >）份</span
              >
              <p v-show="desshow">
                解析：碳水化合物交换份数=食物交换份数×(50%~60%)=16x(50%~60%)
                =8~10份
              </p>
            </div>
            <div class="tmdd" :class="input7show ? 'erso' : ''">
              <span
                >（3）蛋白质交换份数为（<el-input
                  v-model="input7"
                  class="inputs"
                ></el-input
                >）份</span
              >
              <p v-show="desshow">
                解析：蛋白质交换份数=食物交换份数×(15%~20%)=16×(15%~20%)=2~3份
              </p>
            </div>
            <div class="tmdd" :class="input8show ? 'erso' : ''">
              <span
                >（4）脂肪交换份数为（<el-input
                  v-model="input8"
                  class="inputs"
                ></el-input
                >）份</span
              >
              <p v-show="desshow">
                解析：脂肪交换份数=食物交换份数×(25%~30%)=16×(25%~30%)=4~5份
              </p>
            </div>
          </div>
        </div>
      </div>
      <div @click="submitFn" class="tool sub">
        <img
          src="@/images/sub.png"
          alt=""
          srcset=""
          class="active"
          v-show="!desshow"
        />
        <img
          src="@/images/subac.png"
          alt=""
          srcset=""
          class="normal"
          v-show="!desshow"
        />
        <img
          src="@/images/fh.png"
          alt=""
          srcset=""
          class="active"
          v-show="desshow"
        />
        <img
          src="@/images/fhac.png"
          alt=""
          srcset=""
          class="normal"
          v-show="desshow"
        />
      </div>
    </div>
  </div>
</template>
<script>
import headMain from './headMain.vue'
export default {
  components: { headMain },
  name: 'WorkspaceJsonZsCb',
  data() {
    return {
      shownr: false,
      btname: '课堂测试',
      btrouter: 'mK2',
      headimg: require('@/images/yyxzl.png'),
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      input6: '',
      input7: '',
      input8: '',
      input1show: '',
      input2show: '',
      input3show: '',
      input4show: '',
      input5show: '',
      input6show: '',
      input7show: '',
      input8show: '',
      desshow: false
    }
  },

  mounted() {},
  watch: {},
  methods: {
    submitFn() {
      // v-show="desshow"
      if (this.desshow) {
        this.desshow = !this.desshow
        this.$router.push({
          name: 'mK2'
        })
      } else {
        this.desshow = !this.desshow
        if (this.input1 != 70) {
          this.input1show = true
          console.log('回答错误')
        }
        if (this.input2 == 'D') {
          console.log('回答错误')
        } else if (this.input2 == 'd') {
          console.log('回答错误')
        } else {
          this.input2show = true
        }

        if (this.input3 == 'A') {
          console.log('回答错误')
        } else if (this.input3 == 'a') {
          console.log('回答错误')
        } else {
          this.input3show = true
        }

        if (this.input4 != 1400) {
          this.input4show = true
          console.log('回答错误')
        }
        if (this.input5 != 16) {
          this.input5show = true
          console.log('回答错误')
        }
        // if (
        //   (this.input6 != 8 && this.input7 != 3 && this.input8 != 5) ||
        //   (this.input6 != 9 && this.input7 != 2 && this.input8 != 5) ||
        //   (this.input6 != 10 && this.input7 != 2 && this.input8 != 4)
        // ) {
        //   console.log('回答错误')
        // }
        if (this.input6 == 8) {
          if (this.input7 == 3 && this.input8 == 5) {
            console.log('对')
          } else {
            this.input6show = true
            this.input7show = true
            this.input8show = true
          }
        }
        if (this.input6 == 9) {
          if (this.input7 == 2 && this.input8 == 5) {
            console.log('对')
          } else {
            this.input6show = true
            this.input7show = true
            this.input8show = true
          }
        }
        if (this.input6 == 10) {
          if (this.input7 == 2 && this.input8 == 4) {
            console.log('对')
          } else {
            this.input6show = true
            this.input7show = true
            this.input8show = true
          }
        }
      }
    }
  }
}
</script>

<style>
.el-input__inner:hover {
  border-color: none !important;
}
.el-input__inner {
  -webkit-appearance: none;
  background-color: #dbe0e6 !important;
  background-image: none;
  border-radius: 0.02083rem;
  border: 0.00521rem solid #dbe0e6 !important;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  height: 0.20833rem;

  outline: 0;
  padding: 0px 0px !important;
}
.el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border-color: none !important;
  outline: 0;
}
.el-input__inner:focus {
  border-color: none !important;
  outline: 0;
}
</style>
